import React from 'react';
import utils from '../utils'


class R1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }

  componentWillMount() {
    console.log('Component WILL MOUNT!')
  }
  componentDidMount() {
    console.log('Component DID MOUNT!')
  }
  componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
  }
  shouldComponentUpdate(newProps, newState) {
    return true;
  }
  componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
  }
  componentWillUnmount() {
    console.log('Component WILL UNMOUNT!')
  }

  setName() {
    console.log(this)
    this.setState({
      name: "icepy",
    });
  }

  handleClick = () => {
    console.log(this)
    this.setState({
      name: "icepy2",
    });
  }
  render() {
    const { name } = this.state;
    const { home } = this.props;
    return <div>
      {/* 这正是一个奇葩的方式 */}
      <div onClick={this.setName.bind(this)}> set name </div>
      <div onClick={this.handleClick}> set name2 </div>
      <div>{name} {home}</div>
    </div>
  }
}

export default R1